<script setup>
import { ref, computed, inject } from 'vue';
import { Position, Handle } from '@vue-flow/core';
const props = defineProps(['data', 'id']);

// const selectStatus = ref(false);
// const editStatus = inject('editStatus');
const getBorderClass = computed(() => {
  let str = props.data.selected ? 'borderGreen' : 'borderBlack';
  if (props.data.dragging) {
    str = 'borderRed';
  }
  return str;
});
</script>

<template>
  <div class="nodes" :class="getBorderClass">
    <!--    外面必须用toTop和toBottom或者空-->
    <Handle
      :style="{
        height: '13px',
        width: '13px',
      }"
      :type="data?.handleDirection === 'toTop' ? 'source' : 'target'"
      :position="Position.Top"
    />

    <Handle
      :style="{
        height: '13px',
        width: '13px',
      }"
      :type="data?.handleDirection === 'toTop' ? 'target' : 'source'"
      :position="Position.Bottom"
    />

    <div style="text-align: center; width: 100%; word-wrap: break-word; margin: 10px">
      {{ data }}
    </div>
  </div>
</template>
<style>
.vue-flow__node-custom {
  padding: 0px !important;
  background-color: white !important;
  box-shadow: 0 0 0 0 !important;
  border: 0px solid black !important;
}
.nodes {
  width: 150px;
  min-height: 60px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}
.borderBlack {
  border-color: black;
  border-width: 1px;
  color: black;
}
.borderBlue {
  border-color: blue;
  border-width: 2px;
  color: blue;
}
.borderGreen {
  border-color: green;
  border-width: 2px;
  color: green;
}
.borderRed {
  border-color: red;
  border-width: 2px;
  color: red;
}
</style>
